<template>
	<view class="m-phone">
		<view class="bg-photo">
			<image class="bg-photo-img" :src="coverImgUrl" mode="aspectFill"></image>
		</view>
		<view class="top-content">
			<view class="date-box">
				<view class="time-info">
					<text class="hours">{{currentDate.hours}}</text>
					<text class="time-icon">:</text>
					<text class="minutes">{{currentDate.minutes}}</text>
				</view>
				<view class="date-info">
					<view class="md-info">
						{{currentDate.month}}月{{currentDate.day}}日
					</view>
					<view class="week-info">星期{{currentDate.weekday}}</view>
				</view>

			</view>

			<view class="top-app-box">
				<view class="app-item" v-for="(item,index) in topAppList" :key="index">
					<view class="app-icon">
						<image class="app-icon-img" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="app-name">{{item.name}}</view>
				</view>

			</view>

		</view>
		<view class="bottom-content-box">
			<view class="bottom-content-inner">
				<view class="bottom-app-box">
					<view class="app-item" v-for="(item,index) in bottomAppList" :key="index">
						<view class="app-icon">
							<image class="app-icon-img" :src="item.image" mode="aspectFill"></image>
						</view>
						<!-- <view class="app-name">{{item.name}}</view> -->
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			coverImgUrl: {
				type: String,
				default: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cbb5e527d724940a0d916c88189b49c.jpg"
			}
		},
		data() {
			return {
				getTimeIntervalId: null,
				// bgImgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cbb5e527d724940a0d916c88189b49c.jpg",
				topAppList: [{
						name: "公告",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fda7b998722943bfa81287dff7a9a12d.png",
						key: "",
					}, {
						name: "邮件",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ebfb36ab3dbc4a6dbd740e8c5d5eba27.png",
						key: "",
					}, {
						name: "图鉴",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f0710d3c20c44d54a3525008caa96e6c.png",
						key: "",
					},
					{
						name: "短信",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/39bdbdf941fd44edb264013efac793f6.png",
						key: "",
					},

					{
						name: "智能助手",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7f1011f314a744e3b9d71b11c397e382.png",
						key: "",
					},
					{
						name: "意见信箱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d22a3665d79b4472834c175fee885cb2.png",
						key: "",
					},



				],
				bottomAppList: [{
						name: "电话",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c2e5ba000b33456580e1dd518dbb7726.png",
						key: "",
					},
					{
						name: "朋友圈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0de3bc17d08d403f95e8146078cb697c.png",
						key: "",
					},
				],
				currentDate: {
					month: "",
					day: "",
					weekday: "",
					hours: "",
					minutes: ""
				}
			}
		},
		mounted() {
			this.getCurrentDateInfo()
			this.handleStartTimeGet()


		},
		beforeDestroy() {
			if (this.getTimeIntervalId) {
				clearInterval(this.getTimeIntervalId)
			}
		},
		methods: {
			handleStartTimeGet() {
				if (this.getTimeIntervalId) {
					clearInterval(this.getTimeIntervalId)
				}
				this.getTimeIntervalId = setInterval(() => {
					this.getCurrentDateInfo()
				}, 1000)
			},
			getCurrentDateInfo() {
				const now = new Date();
				const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 补零
				const day = now.getDate().toString().padStart(2, '0'); // 补零
				const weekday = this.getWeekday(now.getDay()); // 获取星期几
				const hours = now.getHours().toString().padStart(2, '0'); // 24小时制，补零
				const minutes = now.getMinutes().toString().padStart(2, '0'); // 分钟，补零

				this.currentDate = {
					month,
					day,
					hours,
					minutes,
					weekday,
				}


			},
			getWeekday(dayIndex) {
				const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
				return weekdays[dayIndex];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-phone {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		// background-color: #fff;
		z-index: 999999999999999999;
		pointer-events: none;

		.bg-photo {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 1;

			.bg-photo-img {
				width: 100%;
				height: 100%;
			}

		}



		.top-content {
			position: absolute;
			left: 0rpx;
			top: 300rpx;
			width: 100%;
			min-height: 200rpx;
			flex-direction: column;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			z-index: 2;

			.date-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.time-info {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 100rpx;
					color: #fff;
					line-height: 100rpx;
					font-weight: 400;
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .8);

					.time-icon {
						margin-left: 20rpx;
						margin-right: 20rpx;
						font-size: 80rpx;
						line-height: 80rpx;
					}
				}

				.date-info {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #fff;
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .8);
					line-height: 24rpx;
					margin-top: 10rpx;

					.md-info {
						margin-right: 35rpx;
					}
				}
			}

			.top-app-box {
				width: 780rpx;
				box-sizing: border-box;
				padding: 0rpx 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-top: 50rpx;

			}



		}

		.app-item {
			width: 110rpx;
			margin-right: 65rpx;
			margin-bottom: 25rpx;

			.app-icon {
				width: 100%;
				height: 110rpx;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				padding: 10rpx;

				.app-icon-img {
					width: 100%;
					height: 100%;
				}
			}

			.app-name {
				width: 100%;
				// height: 30rpx;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #fff;
				text-align: center;
				text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .6);
				margin-top: 10rpx;
			}

			&:nth-child(4n) {
				margin-right: 0rpx;
			}


		}


		.bottom-content-box {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20rpx;
			width: 780rpx;
			box-sizing: border-box;
			padding: 0rpx 40rpx;
			z-index: 2;

			.bottom-content-inner {
				width: 100%;
				padding: 25rpx 40rpx;
				border-radius: 50rpx;
				background-color: rgba(0, 0, 0, .3);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.bottom-app-box {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.app-item {
					margin-bottom: 0rpx;
				}

			}

		}
	}
</style>